module.exports = function(babel) {
  const { types: t } = babel;
  return {
    name: "transform-div-to-component",
    visitor: {
      JSXElement(path) {
        console.log('babel==',path);
        const openingPath = path.get("openingElement");
        if (t.isJSXIdentifier(openingPath.node.name, { name: "div" })) {
          const attributes = openingPath.node.attributes;
          let nameAttributeIndex = -1;
          let nameAttributeValue = null;
          for (let i = 0, l = attributes.length; i < l; i++) {
            if (
              t.isJSXIdentifier(attributes[i].name, { name: "name" }) &&
              t.isStringLiteral(attributes[i].value)
            ) {
              nameAttributeIndex = i;
              nameAttributeValue = attributes[i].value.value;
              break;
            }
          }

          if (nameAttributeIndex >= 0 && nameAttributeValue) {
            // Create a new component from the div
            const newElement = t.jsxElement(
              t.jsxOpeningElement(
                t.jsxIdentifier(nameAttributeValue),
                []
              ),
              t.jsxClosingElement(t.jsxIdentifier(nameAttributeValue)),
              path.node.children
            );
            
            // Replace the div with the new element
            path.replaceWith(newElement);
          }
        }
      }
    }
  };
};
